<template>
    <div class="all">
        <div class="fir">
            <img src="https://www.scvtc.edu.cn/images/mtcz.png" style="height: 30px;width:30px;margin-left:12px">
            <font size="6" style="margin: 19px;font-weight:bold">媒体川职</font>
            <a href="https://www.scvtc.edu.cn/xwxw/mtcz.htm">
                <div class="more">MORE</div>
            </a>
        </div>
        <ul>
            
            <li v-for="item,i2 in contentlist" :key="i2"><div class="r"></div>
                <span  class="j"><a :href="contentlistlist[i2]" :title="item">{{item.length>20?item.slice(0,19)+'...':item}}</a></span>
                <span class="time">{{time[i2]}}</span></li>
          
        </ul>


    </div>
</template>
<script setup lang="ts">
const contentlist = [
    "【全景遂宁】职引未来 筑梦青春！这场校园招聘活动在四川职业技术学院举行",
    "【新华网】汇聚名师对接产业 四川职业技术学院持续提升社会服务能力",
    "【中国教育报】强化三大举措 提升技术创新能力",
    "【新浪四川】四川职业技术学院建筑工程学院成功举办“2023年遂宁市大学生建筑施工测量技能大赛“",
    "【学习强国】谨防诈骗披上AI的外衣！"]
 const contentlistlist = [
    "https://xmapp.snxw.com/web/news/content/883140?share=1",
    "http://www.sc.xinhuanet.com/20230615/25de70bd656f4eca9f701ae30b5eb264/c.html",
    "https://share.gmw.cn/topics/2023-06/12/content_36625698.htm",
    "https://sc.sina.cn/suining/info/2023-06-12/detail-imywyyrp2566621.d.html?sinawapsharesource=newsapp&wm=3200_0001",
    "https://article.xuexi.cn/articles/index.html?art_id=9491394818319773871&t=1686123108517&showmenu=false&cdn=https%3A%2F%2Fregion-sichuan-resource&study_style_id=video_default&source=share&share_to=wx_single&item_id=9491394818319773871&ref_read_id=56d0c895-"]
const time=[
'2023/06/19',
'2023/06/15',
'2023/06/12',
'2023/06/12',
'2023/06/07',

];
</script>

<style scoped lang="scss">
.all{
    margin: 20px;
    height: 200px;
    width: 420px;
    display: flex;
    flex-direction: column;

    .fir{
        height: 47px;
        display: flex;
        align-items: center;
        border-bottom:2px solid #eee;
        .more{
            margin-top: 15px;
            margin-left: 150px;
            margin-bottom: 15px;
            color: gray;
            font-weight: bolder;
            height: 40px;
            font-size: 18px;
            text-align: center;
         }
         .more:hover{
            color: orangered;
            border-bottom: 4px solid orangered;
            }
         }
}
ul{
    border-radius: 50%;
    font-size: 14px;
    font-family: 微软雅黑;
    li{
        height: 26px;
        display: flex;
        align-items: center;
        .time{
            width: 100px;
            text-align: right;
        
        }
        .time:hover{
            color: black;
        }
    }
    .j:hover{
        color: #921C1C;
    }
    .j{
       width: 310px;
    }
    .r{
        background-color: black;
        border-radius: 50% 50%;
        height: 5px;
        width: 6px;
        margin: 5px;
    }
}
</style>